import { Graph } from "@antv/x6";

import { useEffect, useRef } from "react";
import PaperSizeCalculator from "./PaperSizeCalculator";
import { Transform } from "@antv/x6-plugin-transform";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Stencil } from "@antv/x6-plugin-stencil";
import "./index.less";

export default function WorkPlate() {
	const refStencil = useRef<HTMLDivElement>(null);
	useEffect(() => {
		createGraph(refStencil);
	});

	return (
		<div className="app">
			<div
				className="stencil"
				ref={refStencil}></div>
			<div
				className="work-plate"
				id="work-plate"></div>
		</div>
	);
}

function createGraph(refStencil: React.RefObject<HTMLDivElement | null>) {
	const paper = new PaperSizeCalculator({ default: 96 });
    // console.log(paper.getStandardSizeInMM('A4'));
	const size = paper.getPaperSize("A4", "px", "portrait");
    size.width = PaperSizeCalculator.toFixed(size.width, 2);
	size.height = PaperSizeCalculator.toFixed(size.height, 2)
	console.log(size);
	const graph = new Graph({
		container: document.getElementById("work-plate")!,
		width: size.width,
		height: size.height,
		background: {
			color: "#F2F7FA",
		},
		mousewheel: {
			enabled: false,
			minScale: 0.4,
			maxScale: 4,
		},
		grid: {
			visible: true,
			size: 5,
			// type: "doubleMesh",
			// args: [
			// 	{
			// 		color: "#eee", // 主网格线颜色
			// 		thickness: 1, // 主网格线宽度
			// 	},
			// 	{
			// 		color: "#ddd", // 次网格线颜色
			// 		thickness: 1, // 次网格线宽度
			// 		factor: 4, // 主次网格线间隔
			// 	},
			// ],
		},
	});

	// 缩放，旋转等插件
	graph.use(
		new Transform({
			resizing: {
				enabled: true,
				minWidth: 10,
				// maxWidth: 200,
				minHeight: 1,
				// maxHeight: 150,
				orthogonal: false,
				restrict: false,
				preserveAspectRatio: false,
			},
			rotating: {
				enabled: true,
				grid: 2,
			},
		})
	);

	// 对齐线插件
	graph.use(
		new Snapline({
			enabled: true,
		})
	);

	graph.addNode({
		x: 160,
		y: 120,
		width: 360,
		height: 120,
		shape: "text-block",
		text: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.`,
		attrs: {
			body: {
				fill: "#efdbff",
				stroke: "#9254de",
				rx: 4,
				ry: 4,
			},
		},
		tools: [{ name: "node-editor", args: {} }],
	});
	addStencil(graph, refStencil);
	return graph;
}

function addStencil(graph: Graph, refStencil: React.RefObject<HTMLDivElement | null>) {
	const stencil = new Stencil({
		title: "Stencil",
		target: graph,
		search(cell, keyword) {
			return cell.shape.indexOf(keyword) !== -1;
		},
		placeholder: "Search by shape name",
		notFoundText: "Not Found",
		collapsable: true,
		stencilGraphHeight: 0,
		groups: [
			{
				name: "group1",
				title: "Group(Collapsable)",
			},
			{
				name: "group2",
				title: "Group",
				collapsable: false,
			},
		],
	});

	const commonAttrs = {
		body: {
			fill: "#fff",
			stroke: "#8f8f8f",
			strokeWidth: 1,
		},
	};

	const n1 = graph.createNode({
		shape: "rect",
		x: 40,
		y: 40,
		width: 80,
		height: 40,
		label: "rect",
		attrs: commonAttrs,
	});

	const n2 = graph.createNode({
		shape: "circle",
		x: 180,
		y: 40,
		width: 40,
		height: 40,
		label: "circle",
		attrs: commonAttrs,
	});

	const n3 = graph.createNode({
		shape: "ellipse",
		x: 280,
		y: 40,
		width: 80,
		height: 40,
		label: "ellipse",
		attrs: commonAttrs,
	});

	const n4 = graph.createNode({
		shape: "path",
		x: 420,
		y: 40,
		width: 40,
		height: 40,
		// https://www.svgrepo.com/svg/13653/like
		path: "M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z",
		attrs: commonAttrs,
		label: "path",
	});

	console.log(refStencil?.current);
	// 需要一个容纳 stencil 的 Dom 容器 stencilContainer
	refStencil?.current?.appendChild(stencil.container);

	stencil.load([n1, n2], "group1");
	stencil.load([n3, n4], "group2");
}
